<template>
  <div ref="bar" class="bar" style="width:100%;height:500px" />
</template>

<script>
import bar from '@/views/dashboard/compoments/bar'
import * as Echarts from 'echarts'
import { getIndexApi } from '@/api/index'
export default {
  name: 'VueAdminTemplateMasterBar',

  data() {
    return {
      all_cate: []
    }
  },
  created() {
    this.initData()
  },
  mounted() {
    this.echarts = Echarts.init(this.$refs.bar)
    console.log(this.echarts)
    this.echarts.setOption(bar)
  },

  methods: {
    async initData() {
      const { data } = await getIndexApi()
      console.log(data)

      data.all_cate.forEach((item, index) => {
        this.all_cate.push({
          num: item.num,
          catename: item.catename
        })
      })
      console.log(this.all_cate)

      // const value2 = this.all_cate.num
      // this.all_cate = res.data.all_cate
      this.all_cate.map(item => {
        bar.xAxis.data.push(item.catename)
        bar.series[0].data.push(item.num)
      })
      console.log(bar)
      this.echarts.setOption(bar)
    }
  }
}
</script>

<style lang="scss" scoped>
.bar{
  background-color: #fff;
}
</style>
